<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>自助挑选月嫂、月儿嫂</title>
		<link rel="stylesheet" type="text/css" href="../css/Mobile verification.css" />
		<script src="../js/flexible.debug.js"></script>
		<script src="../js/flexible_css.debug.js"></script>
		<!--[if lt IE 9]>
        <script src="../js/html5shiv.min.js"></script>
		<script src="../js/respond.min.js"></script>
        <![endif]-->

	</head>
	<body>
		<main>
			<header>
			<ul>
				<li class="return"><img src="../img/return.png"/></li>
				<li class="list">登录</li>
				<li class="null"></li>
			</ul>
			</header>
			
			
		<section>
			<div class="Prompt">
				<p>尊敬的用户：</p>
				<p>为了能让管家帮的管家更好的为您服务，需要您提供正确的手机号码</p>
			</div>
			
			
			<form>
				<ul>
					
					<li class="input-wrap">
							<input id="phone" name="mobile" class="input" value="" placeholder="请输入手机号码" />
							<input id="input_btn"  type="button" name="yzm" class="yzm" disabled="disabled" value="获取验证码" />
					</li>
					<li class="input-wrap">
							<input id="phone_yz" name="type" class="input" value="" placeholder="请输入验证码" />

							

						</li>
				</ul>
				
			</form>
		</section>
		
			<footer>
				<button>立即预约</button>
			</footer>
		</main>
		
		<script src="../js/jquery-3.2.1.js"></script>
		<script>
			$(function(){
				$('footer button').click(function(){
					location.href ='subscribe.html'
				})
				
				$('.return').click(function(){
					location.href="homepage.html";
				});
				
//				$('footer button').click(function(){
//					reg2 = /^1[3|4|5|7|8]\d{9}$/;
//					if(!reg2.test($('#phone').val())){
//						alert('请输入正确格式的手机号码！')
//						return false;
//					 }else if($('#phone_yz').val() === ''){
//						alert('请输入正确的验证码！')
//						return false;
//					}
//					else{
//						location.href ='subscribe.html'
//					}
//				})
				
			})
			
			
			
			$(document).ready(function() {
					var ordertime = 60 //设置再次发送验证码等待时间
					var timeleft = ordertime
					var btn = $(".yzm")
					var phone = $("#phone")
					var reg = /^1[0-9]{10}$/; //电话号码的正则匹配式
					phone.keyup(function() {
							if (reg.test(phone.val())) {
								btn.removeAttr("disabled") //当号码符合规则后发送验证码按钮可点击
							} else {
								btn.attr("disabled", true)
							}
						})
						//计时函数
					function timeCount() {
						timeleft -= 1
						if (timeleft > 0) {
							btn.val(timeleft + " 秒后重发");
							setTimeout(timeCount, 1000)
						} else {
							btn.val("重新发送");
							timeleft = ordertime //重置等待时间
							btn.removeAttr("disabled");
						}
					}
					//事件处理函数
				
					btn.on("click", function() {
						mobile = $("#phone").val();
						console.log(mobile)
						$(this).attr("disabled", true); //防止多次点击
						//此处可添加 ajax请求 向后台发送 获取验证码请求
						timeCount(this);
						$.ajax({　　
							type: "POST", //用POST方式传输
							　　dataType: "text", //数据格式:JSON
							　　url: 'http://192.168.10.12:8080/appMgr/outOrder/getVerifyCode', //目标地址
							async: true,
							　　data: {
								"mobile": mobile,
								"type": 2
							},
							success: function(data) {
								console.log(data)
								data = JSON.parse(data)
								if (data.code == 0) {
									alert(data.msg)
								} else {
									
									alert(data.msg);
								}
							},
							error: function(XMLHttpRequest,  textStatus,  errorThrown)  {                        
								alert(XMLHttpRequest.status);                        
								alert(XMLHttpRequest.readyState);                        
								alert(textStatus);                    
							}, //请求错误时的处理函数
						});
					})
				})
		</script>
	</body>
</html>
